<template>

	<div style="background: #F8F8F8;">
		<div class="bgfff pad10 u-borderRadius8">
			<div class="displayFlexBet" style="margin-bottom: 10px;">
				<div class="color555">重点污染物</div>
				<el-button @click="visible2 = true,editWasteData = ''" icon="el-icon-plus" type="primary"
					size="mini">新增污染物</el-button>
			</div>

			<el-table :data="isImportantList" size="mini" stripe
				style="width: 100%;height: 215px;overflow-y: auto;margin-bottom: 10px;">
				<el-table-column type="index" width="50" label="编号">
				</el-table-column>
				<el-table-column prop="pollutionName" label="污染物种类" width="180">
				</el-table-column>
				<el-table-column prop="designValueStr" label="排放浓度限值(小时)" width="180">
					<template slot-scope="scope">
						<span>{{scope.row.hourLimitConcentration}}</span>
						<span v-if="scope.row.unitCode" style="font-size: 12px;">({{scope.row.unitCode}})</span>
					</template>
				</el-table-column>
				<el-table-column prop="unitCode" label="排放浓度限值(日)" width="180">
					<template slot-scope="scope">
						<span>{{scope.row.dayLimitConcentration}}</span>
						<span v-if="scope.row.unitCode" style="font-size: 12px;">({{scope.row.unitCode}})</span>
					</template>
				</el-table-column>
				<el-table-column prop="unitCode" label="排放速率限值" width="180">
					<template slot-scope="scope">
						<span>{{scope.row.limitRate}}</span>
						<span v-if="scope.row.rateUnitCode"
							style="font-size: 12px;">({{scope.row.rateUnitCode}})</span>
					</template>
				</el-table-column>
				<el-table-column prop="isInspect" label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.busiStatus =='NOT_USE'" type="danger"
							size="mini">{{scope.row.busiStatusStr}}</el-tag>
						<el-tag v-else type="success" size="mini">{{scope.row.busiStatusStr}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<img src="@/assets/sIcon68.png" style="width: 15px;height: 15px;" class="mr20"
							@click="handleEdit(scope.row)" />
						<img src="@/assets/sIcon69.png" style="width: 15px;height: 15px;"
							@click="deleteThis(scope.row)" />
						<!-- <el-button size="mini" type="danger">编辑</el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</div>

		<div class="bgfff pad10 u-borderRadius8 mt20">
			<div class="font16 mb10 pb10 color555" style="border-bottom: 1px solid: #f5f5f5;">非重点污染物</div>
			<el-table :data="notIsImportantList" size="mini" stripe
				style="width: 100%;height: 215px;overflow-y: auto;margin-bottom: 10px;">
				<el-table-column type="index" width="50" label="编号">
				</el-table-column>
				<el-table-column prop="pollutionName" label="污染物种类" width="180">
				</el-table-column>
				<el-table-column prop="designValueStr" label="排放浓度限值(小时)" width="180">
					<template slot-scope="scope">
						<span>{{scope.row.hourLimitConcentration}}</span>
						<span v-if="scope.row.unitCode" style="font-size: 12px;">({{scope.row.unitCode}})</span>
					</template>
				</el-table-column>
				<el-table-column prop="unitCode" label="排放浓度限值(日)" width="180">
					<template slot-scope="scope">
						<span>{{scope.row.dayLimitConcentration}}</span>
						<span v-if="scope.row.unitCode" style="font-size: 12px;">({{scope.row.unitCode}})</span>
					</template>
				</el-table-column>
				<el-table-column prop="unitCode" label="排放速率限值" width="180">
					<template slot-scope="scope">
						<span>{{scope.row.limitRate}}</span>
						<span v-if="scope.row.rateUnitCode"
							style="font-size: 12px;">({{scope.row.rateUnitCode}})</span>
					</template>
				</el-table-column>
				<el-table-column prop="defaultGovernanceEfficiency" label="治理效率" width="180">
					<template slot-scope="scope">
						<span>{{scope.row.defaultGovernanceEfficiency}}%</span>
					</template>
				</el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<img src="@/assets/sIcon68.png" style="width: 15px;height: 15px;" class="mr20"
							@click="handleEdit(scope.row)" />
						<img src="@/assets/sIcon69.png" style="width: 15px;height: 15px;"
							@click="deleteThis(scope.row)" />
						<!-- <el-button size="mini" type="danger">编辑</el-button> -->
					</template>
				</el-table-column>
			</el-table>
		</div>

		<el-dialog :visible.sync="visible2" :close-on-click-modal="false" title="污染物信息" top="5%" width="45%"
			append-to-body>
			<addWaste v-if="visible2" @success="addSuccess(2)" @cancle="visible2 = false" :outletId="outletId"
				:editData="editWasteData" />
		</el-dialog>
	</div>

</template>

<script>
	import addWaste from '@/components/wasteGas/addWaste'
	let that
	export default {
		components: {
			addWaste,
		},
		props: ['outletId', 'editData'],
		data() {
			return {
				visible1: false,
				visible2: false,
				tableData: [],
				unitList: [],
				editWasteData: '',
				getParams: {
					busiStatus: "IN_USE",
					pollutionType: "GAS_POLLUTION"
				},
				form: {
					id: '', // 污染物id
					pollutionName: '', // 污染物名称，必填
					unitCode: '', // 污染物单位，必填
					pollutionType: 'GAS_POLLUTION', // 污染物类型，必填
					isPrincipal: false,
				},
				formRules: {
					pollutionName: [{
						required: true,
						message: '请输入污染物名称',
						trigger: 'blur',
					}],
					unitCode: [{
						required: true,
						message: '请输入污染物单位',
						trigger: 'blur'
					}]
				},


				nowData: '',
				isImportantList: [],
				notIsImportantList: [],
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.nowData = that.editData

			for (let item of that.nowData.pollutionList) {
				if (item.isImportant) {
					that.isImportantList.push(item)
				} else {
					that.notIsImportantList.push(item)
				}
			}
		},

		methods: {

			//删除危废
			deleteThis(item) {
				this.$confirm('此操作将删除此数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasOutlet/deleteGasOutletPollution',
						data: {
							gasOutletPollutionId: item.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.data) {
								that.addSuccess()
							}
						}
					})
				})
			},

			addSuccess() {
				that.ajax({
					url: '/gasOutlet/getGasOutletBase',
					data: {
						outletId: that.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.visible2 = false
							that.$message.success("保存成功！")
							that.nowData = result.data
							that.isImportantList = []
							that.notIsImportantList = []
							for (let item of that.nowData.pollutionList) {
								if (item.isImportant) {
									that.isImportantList.push(item)
								} else {
									that.notIsImportantList.push(item)
								}
							}
							that.$emit("addSuccess", true)
						}
					},
				})
			},

			handleEdit(item) {
				that.visible2 = true
				that.editWasteData = item
			},

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	>>>.el-table th.el-table__cell.is-leaf {
		border-right: 1px solid#E7E7E7;
		border-bottom: unset !important;
	}

	>>>.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border-right: 1px solid#E7E7E7;
		border-bottom: unset !important;
	}
</style>